<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>{{title}}</title>
    <link rel="stylesheet" href="../../../resource/css/dropload.css">
    <link rel="stylesheet" href="../../../resource/css/refresh.css">
</head>
<style>
    *{
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-family: Helvetica, "STHeiti STXihei", "Microsoft JhengHei", "Microsoft YaHei", Tohoma, Arial;
        background-color: #fff;
    }
    .content{
        /*border: 1px solid red;*/
        /*background-color: #fff;*/
    }
    .content ul {
        margin: 0;
        padding: 0;
    }
    .content ul li {
        list-style-type:none;
        border-bottom: 1px solid lightgray;
        height: 6rem;
    }
    .content ul li .left{
        margin-left: .8rem;
        margin-top: .5rem;
        float: left;
    }
    .content ul li .left .title{
        margin-top: .5rem;
        width: 200px;
        height: 16px;
    }
    .content ul li .left .time{
        margin-top:1rem;
        margin-left:.5rem;
        margin-bottom:.5rem;
        /*margin:.5rem 1rem;*/

        color: grey;
    }
    .content ul li .right{
        margin-top: 1rem;
        margin-right: .8rem;
        float: right;
    }
    .clear{
        clear: both;
    }
</style>
<body>
    <div class="content">
        <ul id="historyList">
            <!--<li>-->
                <!--<div class="left">-->
                    <!--<div class="title">-->
                        <!--<strong>好好好</strong>-->
                    <!--</div>-->
                    <!--<div class="time">2019-04-29 16：06：25</div>-->
                <!--</div><div class="right">-->
                <!--<span>￥100</span>-->
                <!--</div><div class="clear"></div>-->
            <!--</li>-->
        </ul>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="../../../resource/js/layer/2.4/layer.js"></script>
<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>
<script src="../../../resource/js/dropload.min.js"></script>
<script>
    var token;
    mag.toLogin(function (res) {
        token = res.token;
    })
</script>
<script>
    $(function(){
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 10;

        // dropload
        $('.content').dropload({
            scrollArea : window,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉刷新↓</div>',
                domUpdate  : '<div class="dropload-update">↑释放更新↑</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
            },
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多↑</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                domNoData  : '<div class="dropload-noData">没东西了</div>'
            },
            loadUpFn : function(me){
                $.ajax({
                    type: 'POST',
                    url: '/Stick/getUserPayList',
                    data:{
                        token:token,
                        page:0,
                        size:10
                    },
                    dataType: 'json',
                    success: function(data){
                        page = 1;
                        var list = data.data;
                        var result = '';
                        if (data.code == 200) {
                            for(var i = 0; i <list.length; i++){
                                result +=   '<li>\n' +
                                    '    <div class="left">\n' +
                                    '        <div class="title"><strong>'+list[i].name+'</strong></div>\n' +
                                    '        <div class="time">'+list[i].create_time+'</div>\n' +
                                    '    </div>\n' +
                                    '    <div class="right">\n' +
                                    '        <span>￥'+list[i].amount+'</span>\n' +
                                    '    </div>\n' +
                                    '    <div class="clear"></div>\n' +
                                    '</li>';
                            }
                        } else {
                            result = '<img style="width: 60%; margin-left: 20%;" src="http://download.bihuapp.com/icon/pic.png">';
                        }

                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('#historyList').html(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            // 解锁loadDownFn里锁定的情况
                            me.unlock();
                            me.noData(false);
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('网络出错!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn : function(me){
                var result = '';
                $.ajax({
                    type: 'POST',
                    url: '/Stick/getUserPayList',
                    data:{
                        token:token,
                        page:page,
                        size:size
                    },
                    dataType: 'json',
                    success: function(data){
                        var list = data.data;
                        var arrLen = data.data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result +=   '<li>\n' +
                                    '    <div class="left">\n' +
                                    '        <div class="title"><strong>'+list[i].name+'</strong></div>\n' +
                                    '        <div class="time">'+list[i].create_time+'</div>\n' +
                                    '    </div>\n' +
                                    '    <div class="right">\n' +
                                    '        <span>￥'+list[i].amount+'</span>\n' +
                                    '    </div>\n' +
                                    '    <div class="clear"></div>\n' +
                                    '</li>';
                            }
                            // 如果没有数据
                        }else{
                            if (page == 0){
                                result = '<img style="width: 60%; margin-left: 20%;" src="http://download.bihuapp.com/icon/pic.png">';
                            }
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        page++;
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('#historyList').append(result);
                            // 每次数据插入，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        // alert('网络错误!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold : 50
        });
    });
</script>
</html>